<template>
    <div class="m-vuex">
        <h4>{{title}}</h4>
        <p>{{mes}}</p>
        <ul>
            <li v-for="item in arrData" :key="item">{{item}}</li>
        </ul>
        <br />
        <ul>
            <li v-for="item in arr" :key="item">{{item}}</li>
        </ul>
        <button @click="add">add</button>
        <button @click="reduce">reduce</button>
    </div>
</template>

<script>
import {mapGetters} from "vuex";
export default {    
    name: 'vuexLearn',
    data(){
        return {
            title: 'vuex',
            mes: 1
        }
    },
    computed: {
        arrData(){
            this.$store.dispatch('index/arrayaddmax');
            return this.$store.state.index.arr;
        },

        ...mapGetters({
            'arr': 'index/arrmap1'
        })
    },
    mounted () {
        // console.log(this.$store.state.index.index.count)
        this.mes = this.$store.state.index.index.count;
    },
    methods: {
        add(){
            this.$store.dispatch("index/addmax");
            this.mes = this.$store.state.index.index.count;
        },
        reduce(){
        }
        
    }
}
</script>

